<!--
 * @Descripttion: --
 * @Author: zhoujj
 * @Date: 2021-07-02 08:56:43
 * @LastEditors: zhoujj
 * @LastEditTime: 2022-05-25 14:55:02
-->
<template>
  <div>
    <el-form label-width="100px" :model="form" :rules="rules" ref="form">
      <FormItemDemo v-for="(item, index) in list" :key="index" :item-config="item">
          <template v-slot:header v-if="item.type === 'el-input'">
              <div>我是header</div>
          </template>
      </FormItemDemo>
    </el-form>
    <el-button type="primary" @click="submitForm('form')">保存</el-button>
  </div>
</template>

<script>
    import FormItemDemo from './components/FormItemDemo.vue'
    import formJson from './formJson.js'
    export default {
        components: {
            FormItemDemo
        },
        data () {
            return {
                list: formJson,
                form: {
                    field1: ''
                },
                rules: {
                    field1: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!')
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        }
    }
</script>

<style scoped>
.childHeader{
    color: blue;
    font-size: 24px;
}

</style>
